<template>
  <!-- <van-nav-bar title="支付结果" /> -->
  <div class="app-container">
    <div class="order-result">
      <van-icon name="checked" color="#02cd3e" size="100" />
      <div class="order-text">
        订单支付成功，请注册后查看主播相册
      </div>
      <div class="register-btn">
        <van-button type="primary" size="small" :disabled="!tokenStr" @click="handleRegister">注册查看</van-button>
      </div>
    </div>
  </div>
</template>
<script setup>

import { computed, reactive, toRefs, ref, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"

import {
  GetOrderInfoByTradeNoTo
} from "@/api/mine/index.js"

const route = useRoute()
const router = useRouter()

let orderNumber = ref("")

let tokenStr = ref("")
const handleRegister = () => {
  router.push({
    path: '/register',
    query: {
      id: tokenStr.value
    }
  })
}

onMounted(async () => {
  orderNumber.value = route.query.out_trade_no
  let params = {
    tradeNo: route.query.trade_no
  }
  let data = await GetOrderInfoByTradeNoTo(params)
  try {
    tokenStr.value = data.data.token
    setTimeout(() => {
      handleRegister()
    }, 10);
  } catch (error) {

  }
})
</script>



<style lang="scss" scoped>
.app-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .order-result {
    margin-top: -40vh;
    text-align: center;
  }

  .order-text {
    font-size: 20px;
    margin-top: 20px;
    color: #999;
  }

  .order-number-text {
    font-size: 14px;
    color: #aaa;
  }
}

.register-btn {
  margin-top: 15px;
}
</style>
